<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 企业门户网站</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 自定义CSS -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi bi-building"></i> 企业名称
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="about.html">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="products.html">产品中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.html">新闻中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系我们</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="搜索...">
                    <button class="btn btn-outline-light" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <header class="bg-light py-5 mb-5">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <h1 class="display-4">关于我们</h1>
                    <p class="lead">了解我们的历史、使命和价值观</p>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container my-5">
        <!-- 公司简介 -->
        <section class="row mb-5 align-items-center">
            <div class="col-lg-6">
                <h2 class="mb-4">公司简介</h2>
                <p>企业名称成立于2005年，是一家专注于[行业领域]的高新技术企业。经过多年的发展，我们已经成长为行业内的领先企业，拥有[数字]名员工和[数字]平方米的现代化生产基地。</p>
                <p>我们始终坚持以客户需求为导向，以技术创新为驱动，致力于为客户提供高品质的产品和卓越的服务体验。公司拥有强大的研发团队和完善的质量管理体系，确保每一件产品都达到最高标准。</p>
                <p>多年来，我们已成功服务于[数字]家国内外知名企业，产品远销[数字]个国家和地区，赢得了客户的广泛认可和好评。</p>
            </div>
            <div class="col-lg-6">
                <img src="https://placehold.co/600x400" alt="公司大楼" class="img-fluid rounded shadow">
            </div>
        </section>

        <!-- 发展历程 -->
        <section class="mb-5">
            <h2 class="text-center mb-5">发展历程</h2>
            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>2005年</h4>
                        <p>公司成立，专注于[初始业务领域]</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>2008年</h4>
                        <p>扩大生产规模，建立第一个生产基地</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>2012年</h4>
                        <p>通过ISO9001质量管理体系认证</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>2015年</h4>
                        <p>产品首次出口海外市场</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>2018年</h4>
                        <p>建立研发中心，加强技术创新</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-content">
                        <h4>2022年</h4>
                        <p>年销售额突破[数字]亿元</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 企业文化 -->
        <section class="mb-5">
            <h2 class="text-center mb-5">企业文化</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 text-center p-4">
                        <div class="card-body">
                            <i class="bi bi-eye-fill text-primary fs-1 mb-3"></i>
                            <h4 class="card-title">企业愿景</h4>
                            <p class="card-text">成为全球[行业领域]的领导者，为客户创造最大价值。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 text-center p-4">
                        <div class="card-body">
                            <i class="bi bi-bullseye text-primary fs-1 mb-3"></i>
                            <h4 class="card-title">企业使命</h4>
                            <p class="card-text">通过创新技术和卓越品质，改善人们的生活和工作方式。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 text-center p-4">
                        <div class="card-body">
                            <i class="bi bi-heart-fill text-primary fs-1 mb-3"></i>
                            <h4 class="card-title">核心价值观</h4>
                            <p class="card-text">客户至上、诚信负责、创新进取、团队合作、追求卓越。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 团队介绍 -->
        <section class="mb-5">
            <h2 class="text-center mb-5">我们的团队</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 text-center">
                        <img src="https://placehold.co/400x400" class="card-img-top" alt="团队成员">
                        <div class="card-body">
                            <h5 class="card-title">张某某</h5>
                            <p class="text-muted">创始人兼CEO</p>
                            <p class="card-text">拥有20年行业经验，带领公司从初创走向行业领先。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 text-center">
                        <img src="https://placehold.co/400x400" class="card-img-top" alt="团队成员">
                        <div class="card-body">
                            <h5 class="card-title">李某某</h5>
                            <p class="text-muted">技术总监</p>
                            <p class="card-text">资深技术专家，主导多项技术创新和产品研发。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 text-center">
                        <img src="https://placehold.co/400x400" class="card-img-top" alt="团队成员">
                        <div class="card-body">
                            <h5 class="card-title">王某某</h5>
                            <p class="text-muted">市场总监</p>
                            <p class="card-text">市场战略专家，成功开拓多个国内外市场。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 资质荣誉 -->
        <section class="mb-5">
            <h2 class="text-center mb-5">资质荣誉</h2>
            <div class="row g-4">
                <div class="col-6 col-md-3">
                    <div class="card h-100 text-center p-3">
                        <img src="https://placehold.co/150x150" class="card-img-top" alt="荣誉1">
                        <div class="card-body p-0 pt-3">
                            <h6 class="card-title">高新技术企业</h6>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card h-100 text-center p-3">
                        <img src="https://placehold.co/150x150" class="card-img-top" alt="荣誉2">
                        <div class="card-body p-0 pt-3">
                            <h6 class="card-title">ISO9001认证</h6>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card h-100 text-center p-3">
                        <img src="https://placehold.co/150x150" class="card-img-top" alt="荣誉3">
                        <div class="card-body p-0 pt-3">
                            <h6 class="card-title">行业创新奖</h6>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card h-100 text-center p-3">
                        <img src="https://placehold.co/150x150" class="card-img-top" alt="荣誉4">
                        <div class="card-body p-0 pt-3">
                            <h6 class="card-title">最佳雇主</h6>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5>关于我们</h5>
                    <p>企业简介文字，介绍企业的基本情况、主营业务和发展方向。</p>
                    <div class="social-icons">
                        <a href="#" class="text-white me-2"><i class="bi bi-facebook"></i></a>
                        <a href="#" class="text-white me-2"><i class="bi bi-twitter"></i></a>
                        <a href="#" class="text-white me-2"><i class="bi bi-linkedin"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-instagram"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-4 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="index.html" class="text-white">首页</a></li>
                        <li><a href="about.html" class="text-white">关于我们</a></li>
                        <li><a href="products.html" class="text-white">产品中心</a></li>
                        <li><a href="news.html" class="text-white">新闻中心</a></li>
                        <li><a href="contact.html" class="text-white">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4 mb-md-0">
                    <h5>联系方式</h5>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-geo-alt me-2"></i> 北京市朝阳区某某路123号</li>
                        <li><i class="bi bi-telephone me-2"></i> 010-12345678</li>
                        <li><i class="bi bi-envelope me-2"></i> info@company.com</li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>订阅我们</h5>
                    <p>订阅我们的新闻通讯，获取最新产品信息和行业动态。</p>
                    <form>
                        <div class="input-group mb-3">
                            <input type="email" class="form-control" placeholder="您的邮箱">
                            <button class="btn btn-primary" type="button">订阅</button>
                        </div>
                    </form>
                </div>
            </div>
            <hr class="my-4">
            <div class="row">
                <div class="col-md-6 text-center text-md-start">
                    <p class="mb-0">&copy; 2023 企业名称. 保留所有权利.</p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <p class="mb-0">
                        <a href="#" class="text-white me-3">隐私政策</a>
                        <a href="#" class="text-white">使用条款</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS 和依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="js/script.js"></script>
</body>

</html>